<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>每日打卡审核列表</title>

    <%@include file="/WEB-INF/views/commons/common.jsp" %>

    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">

</head>
<body data-grid="easyui">
<div class="path"><span class="right-index">&gt;</span> 现在的位置：每日打卡审核列表</div>
<div class="tab-content">
    <div class="fold_ex">
        <h2 class="title-h2">
            <span style="width:100%;">
            </span>
            <a href="javascript:void(0);" class="hide-next-btn">收起</a>
        </h2>
        <div>
            <form action="#">
                <table class="search-table container">
                    <tr>
                       <td class="text-right col-xs-2">创建时间起</td>
                       <td class="col-xs-4">
                        <input type="text" class="form-control"
                           id="startPunchTime" name="startPunchTime" value=""
                           onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'endPunchTime\')}'});"
                           onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly"/>
                       </td>
                       <td class="text-right col-xs-2">创建时间止</td>
                       <td class="col-xs-4">
                        <input type="text" class="form-control"
                           id="endPunchTime" name="endPunchTime" value=""
                           onFocus="WdatePicker({minDate: '#F{$dp.$D(\'startPunchTime\')}'});"
                           onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly"/>
                       </td>
                    </tr>
                    <tr>
                       <td class="text-right col-xs-2">学员</td>
                       <td class="col-xs-4">
                            <select name="userId" class="form-control">
                                <option value="" selected="selected">请选择</option>
                                <c:forEach items="${students}" var="student">
                                    <option value="${student.userId}">${student.userName}</option>
                                </c:forEach>
                            </select>
                       </td>
                       <td class="text-right col-xs-2"></td>
                       <td class="col-xs-4">
                       </td>
                    </tr>
                    <tr>
                        <td class="text-right col-xs-2"></td>
                        <td class="text-right">
                            <button type="button" class="btn search-btn" data-method="search"><i
                                    class="fa fa-search"></i>&nbsp;查询&nbsp;
                            </button>
                            <button type="button" class="btn search-btn" data-method="clear"><i class="fa fa-trash"></i>&nbsp;清空&nbsp;
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

        <hr class="search-line"/>
        <table class="easyui-datagrid">
            <thead>
            <tr>
                <th data-options="field:'dailyClockId',checkbox:true">选择</th>
                <th data-options="field:'userName',width:50,align:'center'">学员</th>
                <th data-options="field:'punchTime',width:50,align:'center'">每日打卡时间</th>
                <th data-options="field:'dailyTaskCorrectRate',width:50,align:'center'">每日任务正确率</th>
                <th data-options="field:'liveBroadcastState',width:50,align:'center'">直播课到课情况</th>
                <th data-options="field:'recordedBroadcastCompletion',width:50,align:'center'">录播课完成情况</th>
                <th data-options="field:'englishStudyState',width:50,align:'center'">英语打卡审核</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>


<script type="text/javascript" src="${base_href}/static/ui-frame/iframe-auto-height/jquery.autoheight.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/easyui.util.js"></script>
<script type="text/javascript"
        src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript" src="${base_href}/static/ui-frame/layer/layer.js"></script>

<script type="text/javascript" src="${base_href}/static/ui-frame/requirejs/2.2.0/require.js"></script>

<script type="text/javascript">
    requirejs.config({
        baseUrl: '<c:url value="/static/"/>',
        paths: {
            Grid: 'component/grid/js/ms-grid',
        },
        config: {
            'Grid': {
                contextPath: '<c:url value="/"/>',
                url: 'getAuditList.json'
            },
        }
    });

    require(['Grid'], function (Grid) {
        Grid.columns({
            liveBroadcastState: {
                formatter: function (value, row, index) {
                    var vv = "数据同步中";
                    if (value == 0) {
                        vv = "无直播";
                    } else if (value == 1){
                        vv = "已上课";
                    } else if (value == 2){
                        vv = "未上课";
                    }
                    return "<span>" + vv + "</span>"
                }
            },
            englishStudyState: {
                formatter: function (value, row, index) {
                    var vv = "数据同步中";
                    if (value == '0') {
                        vv = "未上传图片";
                    } else if (value == '1'){
                        vv = "未审核";
                    } else if (value == '2'){
                        vv = "审核通过";
                    } else if (value == '3'){
                        vv = "审核不通过"
                    }
                    return "<span>" + vv + "</span>"
                }
            },
            userName: {
                formatter: function(value, row, index) {
                    var v = value == null ? "" : $('<div/>').text(value).html();
                    return "<a href='javaScript:void(0);' onclick=\"grid.userName(event, " + index + ")\" class='grid-button' plain='true' title='"+ v +"'><div>" +  v + "</div></a>";
                },
                event: function(event, index) {
                    var row = this.grid.datagrid('getRows')[index];

                    var that = this
                    let url = basePath + "/dailyClock/openAuditDailyClock.html?dailyClockId=" + row.dailyClockId;
                    layer.open({
                       type: 2,
                       title: "每日打卡审核",
                       maxmin: true,
                       area: ['700px', '600px'],
                       content: url,
                       cancel: function(){
                        that.grid.datagrid('reload', that.queryParam());
                       }
                    });
                    event.stopPropagation();
                }
            }
        });
        Grid.methods({
            doDailyClock: function () {}
        });
        $(function () {
            window.grid = Grid.events();
        })
    })
</script>


</body>
</html>
